<template>
    <div class="carbon-coin-page">
      <el-row :gutter="24">
        <!-- 碳币发放区域 -->
        <el-col :span="12">
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span>碳币发放</span>
            </div>
            <div>
              <p>系统发放碳币：</p>
              <el-input v-model="systemIssuedCoins" placeholder="请输入发放的碳币数量"></el-input>
              <br/>
              <br/>
              <el-button type="primary" @click="handleSystemIssue">确认发放</el-button>
            </div>
          </el-card>
          <el-card class="box-card chart-card">
            <div slot="header">
              <span>碳币转换汇率折线图</span>
            </div>
            <div ref="conversionRateChart" style="height: 300px; width: 500px;"></div>
          </el-card>
        </el-col>
  
        <!-- 碳排放额度转换区域 -->
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>碳排放额度转换</span>
            </div>
            <div>
              <p>剩余碳排放额度：{{ remainingEmissionQuota }}</p>
              <el-form>
                <el-form-item label="输入要转换的额度">
                  <el-input v-model="convertibleQuota" placeholder="请输入转换额度"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleConvertToCoins">转换为碳币</el-button>
                </el-form-item>
              </el-form>
              <p>当前碳币余额：{{ carbonCoins }}</p>
            </div>
          </el-card>
          <el-card class="box-card chart-card">
            <div slot="header">
              <span>个人账户波动</span>
            </div>
            <div ref="conversionRateCharts" style="height: 300px; width: 500px;"></div>
          </el-card>
        </el-col>
        
      </el-row>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
    
    data() {
      return {
        systemIssuedCoins: 0,
        convertibleQuota: '',
        remainingEmissionQuota: 1000, // 假设初始剩余碳排放额度为1000单位
        carbonCoins: 0, // 用户现有的碳币数量
        conversionRateChartData: [], // 折线图数据
        conversionRateChartDatas: [], // 折线图数据
      };
    },
    mounted() {
    this.initConversionRateChart();
    this.initConversionRateCharts();
  },
    methods: {
      initConversionRateChart() {
      const chart = echarts.init(this.$refs.conversionRateChart);
      chart.setOption({
        // 这里配置你的折线图option
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
        }],
      });
    },
    initConversionRateCharts() {
      const chart = echarts.init(this.$refs.conversionRateCharts);
      chart.setOption({
        // 这里配置你的折线图option
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: [1000, 932, 820, 1200, 1102, 1025, 945],
          type: 'line',
        }],
      });
    },
      handleSystemIssue() {
        // 处理系统发放碳币逻辑，这里仅做模拟示例
        this.carbonCoins += Number(this.systemIssuedCoins);
        // 清空输入框
        this.systemIssuedCoins = '';
      },
      handleConvertToCoins() {
        // 转换逻辑，根据规则将输入的碳排放额度转换为碳币
        const convertedCoins = this.convertibleQuota * 1.2;
        this.carbonCoins += convertedCoins;
        this.remainingEmissionQuota -= this.convertibleQuota;
        // 清空输入框
        this.convertibleQuota = '';
      },
    },
  };
  </script>
  <style scoped>
  .box-card1{
    width: 500px;
    height: 350px; /* 根据需要调整图表高度 */
  }
  .box-card{
    width: 500px;
    height: 350px; /* 根据需要调整图表高度 */
  }
  .chart-card {
    width: 500px;
    height: 350px; /* 根据需要调整图表高度 */
  }
  </style>